<template>
  <div class="injury-message">
    <div class="main-title">
      <p>工伤申报信息</p>
    </div>
    <div class="injury-content">
      <div class="injury-title">
        <p>职工信息</p>
      </div>
      <el-row :gutter="20" class="el-list">
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="姓名">姓名:</span>
          <span class="item_content" :title="injuryMessage.aac003">{{injuryMessage.aac003}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="性别">性别:</span>
          <span class="item_content" :title="injuryMessage.aac004">{{injuryMessage.aac004}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="统筹区">统筹区:</span>
          <span class="item_content" :title="injuryMessage.aaa027">{{injuryMessage.aaa027}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="民族">民族:</span>
          <span class="item_content" :title="injuryMessage.aac005">{{injuryMessage.aac005}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="证件类型">证件类型:</span>
          <span class="item_content" :title="injuryMessage.aac058">{{injuryMessage.aac058}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="证件号码">证件号码:</span>
          <span class="item_content" :title="injuryMessage.aac147">{{injuryMessage.aac147}}</span>
        </el-col>

        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="联系地址">联系地址:</span>
          <span class="item_content" :title="injuryMessage.aae006">{{injuryMessage.aae006}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="联系电话">联系电话:</span>
          <span class="item_content" :title="injuryMessage.aae005">{{injuryMessage.aae005}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="邮编">邮编:</span>
          <span class="item_content" :title="injuryMessage.aae007">{{injuryMessage.aae007}}</span>
        </el-col>

        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="参加工作时间">参加工作时间:</span>
          <span class="item_content" :title="injuryMessage.aac007">{{injuryMessage.aac007}}</span>
        </el-col>
      </el-row>
      <div class="injury-title">
        <p>用人单位信息</p>
      </div>
      <el-row :gutter="20" class="el-list">
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="单位名称">单位名称:</span>
          <span class="item_content" :title="injuryMessage.aab069">{{injuryMessage.aab069}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="统一社会信用代码">统一社会信用代码:</span>
          <span class="item_content" :title="injuryMessage.bab010">{{injuryMessage.bab010}}</span>
        </el-col>

        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="联系人">联系人:</span>
          <span class="item_content" :title="injuryMessage.aae004">{{injuryMessage.aae004}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="联系电话">联系电话:</span>
          <span class="item_content" :title="injuryMessage.bae566">{{injuryMessage.bae566}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="联系地址">联系地址:</span>
          <span class="item_content" :title="injuryMessage.aae006">{{injuryMessage.aae006}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="邮编">邮编:</span>
          <span class="item_content" :title="injuryMessage.aae007">{{injuryMessage.aae007}}</span>
        </el-col>
        <el-col :span="8" class="el-list-item">
          <span class="right_item" title="法人代表">法人代表:</span>
          <span class="item_content" :title="injuryMessage.aab013">{{injuryMessage.aab013}}</span>
        </el-col>
      </el-row>
      <div v-if="isMore">
        <div class="injury-title">
          <p>申请人信息</p>
        </div>
        <el-row :gutter="20" class="el-list">
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="申请主体">申请主体:</span>
            <span class="item_content" :title="injuryMessage.alc009">{{injuryMessage.alc009}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="申请人姓名">申请人姓名:</span>
            <span class="item_content" :title="injuryMessage.aac042">{{injuryMessage.aac042}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="申请人证件类型">申请人证件类型:</span>
            <span class="item_content" :title="injuryMessage.bae565">{{injuryMessage.bae565}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="申请人证件号码">申请人证件号码:</span>
            <span class="item_content" :title="injuryMessage.aac044">{{injuryMessage.aac044}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="申请人联系电话">申请人联系电话:</span>
            <span class="item_content" :title="injuryMessage.acl049">{{injuryMessage.acl049}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span title="申请人联系电话">申请日期:</span>
            <span :title="injuryMessage.aae127">{{injuryMessage.aae127}}</span>
          </el-col>
        </el-row>
        
        <div class="injury-title">
          <p>工伤信息</p>
        </div>
        <el-row :gutter="20" class="el-list">
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="工伤类别">工伤类别:</span>
            <span class="item_content" :title="injuryMessage.alc027">{{injuryMessage.alc027}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害程度">伤害程度:</span>
            <span class="item_content" :title="injuryMessage.alc021">{{injuryMessage.alc021}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="职业工种或工作岗位">职业工种或工作岗位:</span>
            <span class="item_content" :title="injuryMessage.aca111">{{injuryMessage.aca111}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害部位1">伤害部位1:</span>
            <span class="item_content" :title="injuryMessage.alc042">{{injuryMessage.alc042}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害部位2">伤害部位2:</span>
            <span class="item_content" :title="injuryMessage.alc043">{{injuryMessage.alc043}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害部位3">伤害部位3:</span>
            <span class="item_content" :title="injuryMessage.alc044">{{injuryMessage.alc044}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害部位4">伤害部位4:</span>
            <span class="item_content" :title="injuryMessage.alc046">{{injuryMessage.alc046}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="伤害部位5">伤害部位5:</span>
            <span class="item_content" :title="injuryMessage.alc047">{{injuryMessage.alc047}}</span>
          </el-col>
          

          
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="事故类别">事故类别:</span>
            <span class="item_content" :title="injuryMessage.ala028">{{injuryMessage.ala028}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="事故地点">事故地点:</span>
            <span class="item_content" :title="injuryMessage.blb003">{{injuryMessage.blb003}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="交通事故认定书编码">交通事故认定书编码:</span>
            <span class="item_content" :title="injuryMessage.blc542">{{injuryMessage.blc542}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="是否涉及第三人">是否涉及第三人:</span>
            <span class="item_content" :title="injuryMessage.blc543">{{injuryMessage.blc543}}</span>
          </el-col>

          
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="诊断机构">诊断机构:</span>
            <span class="item_content" :title="injuryMessage.alc007">{{injuryMessage.alc007}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="首诊日期">首诊日期:</span>
            <span class="item_content" :title="injuryMessage.aae030">{{injuryMessage.aae030}}</span>
          </el-col>

          

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="接触职业病危害月数">接触职业病危害月数:</span>
            <span class="item_content" :title="injuryMessage.alc048">{{injuryMessage.alc048}}</span>
          </el-col>

          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="职业病名称1">职业病名称1:</span>
            <span class="item_content" :title="injuryMessage.ala017">{{injuryMessage.ala017}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="职业病名称2">职业病名称2:</span>
            <span class="item_content" :title="injuryMessage.ala029">{{injuryMessage.ala029}}</span>
          </el-col>
          <el-col :span="8" class="el-list-item">
            <span class="right_item" title="因工死亡（失踪）日期">因工死亡（失踪）日期:</span>
            <span class="item_content" :title="injuryMessage.alc040">{{injuryMessage.alc040}}</span>
          </el-col>
          <el-col :span="24" class="el-list-item">
            <span class="right_item" title="伤害部位描述">伤害部位描述:</span>
            <span class="item_content1" :title="injuryMessage.alc022">{{injuryMessage.alc022}}</span>
          </el-col>
          <el-col :span="24" class="el-list-item">
            <span class="right_item" title="伤害事件情况">伤害事件情况:</span>
            <span class="item_content1" :title="injuryMessage.alc006">{{injuryMessage.alc006}}</span>
          </el-col>
          <el-col :span="24" class="el-list-item">
            <span class="right_item" title="医疗救治的基本情况和诊断意见">医疗救治的基本情况和诊断意见:</span>
            <span class="item_content1" :title="injuryMessage.blc508">{{injuryMessage.blc508}}</span>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="20" class="el-list">
        <el-col :span="24" class="searchMore">
          <i class="el-icon-arrow-down" :class="isMore ? 'is-active' : ''" @click="searchMore"></i>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="es6">
export default {
  props: {
    isCodeType: {
      type: Boolean,
      default: true
    },
    functionId: {
      type: String,
      default: "person"
    },
    panel: {
      type: Object,
      default: function() {
        return null;
      }
    }
  },
  data() {
    return {
      injuryMessage: {},
      isMore: false
    };
  },
  computed: {
    personid() {
      // console.log('this.$store.getters.personid', this.$store.getters.personid);
      return this.$store.getters.personid;
    },
    companyid() {
      // console.log('this.$store.getters.companyid', this.$store.getters.companyid);
      return this.$store.getters.companyid;
    },
    backFun() {
      return this.$store.getters.backFun;
    },
    codeTypes() {
      return this.$store.getters.codeTypes;
    }
  },
  watch: {
    personid: {
      handler(value) {
        this.getUserInformation(value);
      },
      deep: true
    },
    companyid: {
      handler(value) {
        this.getUserInformation(value);
      },
      deep: true
    },
    panel: {
      handler(value) {
        // console.log(value)
        if (value.cpInfo) {
          this.injuryMessage = value.cpInfo || {};
        } else if (value.psInfo) {
          this.injuryMessage = value.psInfo || {};
        }
      },
      deep: true
    }
  },
  methods: {
    searchMore() {
      this.isMore = !this.isMore;
    },
    getUserInformation(value) {
      // console.log(value)
      let params = {
        panel: {
          psInfo: {},
          psInsure: [],
          cpInfo: {},
          cpInsure: [],
          functionid: this.functionId
        },
        commonSearch_info: {
          personInfo: value.aac001,
          companyInfo: value.aab001,
          injuryInfo: value.aaz127
        },
        ...value.data,
        path: this.$route.path
      };

      if (this.isCodeType) {
        params.codeTypes = this.codeTypes;
      }
      // if(this.dataType == 'company'){
      //     params.commonSearch_info.companyInfo = value;
      // }else if(this.dataType == 'person'){
      //     params.commonSearch_info.personInfo = value;
      // }
      this.$api
        .commonPost(this.$route.path + "/doCheck/commonSearch_info/", params)
        .then(res => {
          // console.log(res)
          if (res.status === "0") {
            this.$store.dispatch("SET_COMMON", res.data);
            if (res.data.codeTypes) {
              this.$store.dispatch("SET_CODETYPE", res.data);
            }
            if (res.data.panel.cpInfo) {
              this.injuryMessage = res.data.panel.cpInfo || {};
            } else if (res.data.panel.psInfo) {
              this.injuryMessage = res.data.panel.psInfo || {};
            }
            // if (this.dataType == "company") {
            //   this.companyMessage = res.data.panel.cpInfo || {};
            //   this.row = res.data.panel.cpInsure || [];
            // } else if (this.dataType == "person") {
            //   this.personMessage = res.data.panel.psInfo || {};
            //   this.row = res.data.panel.psInsure || [];
            // }
          } else if (res.successMessage && res.successMessage.length > 0) {
            res.successMessage.map(item => {
              this.$message({
                type: "success",
                message: item,
                duration: 0,
                showClose: true
              });
            });
          } else if (res.errorMessage && res.errorMessage.length > 0) {
            res.errorMessage.map(item => {
              this.$message({
                type: "error",
                message: item,
                duration: 0,
                showClose: true
              });
            });
          } else if (res.warnMessage && res.warnMessage.length > 0) {
            res.warnMessage.map(item => {
              this.$message({
                type: "warning",
                message: item,
                duration: 0,
                showClose: true
              });
            });
          }
        });
    }
  },
  mounted() {
    console.log(this.panel);
  }
};
</script>
<style lang="less" scoped>
.injury-message {
  width: 100%;
  .main-title{
    p{
      margin-top: 10px;
      text-align: center;
      font-size: 20px;
      color: #1a81ce;
      font-weight: bold;
      padding-bottom: 10px;
      border-bottom: 1px solid #1a81ce;
    }
  }
  .injury-content {
    .injury-title {
      // margin-bottom: 20px;
      p {
        // padding: 10px 0px;
        font-size: 16px;
        color: #1a81ce;
        font-weight: bold;
      }
    }
    .el-list {
      .el-list-item {
        display: flex;
        margin-bottom: 15px;
        .right_item{
          text-align: right;
           
        }
        .item_content{
           width: 220px;
        }
        .item_content1{
          width: 600px;
        }
        span {
         width: 100px;
          // margin-right: 5px;
          color: #606266;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          a {
            color: #008af0;
          }
        }
        div {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .searchMore {
        text-align: center;
        i {
          font-size: 16px;
          cursor: pointer;
          // transition: transform .3s,-webkit-transform .3s;
          &:hover {
            color: #1a81ce;
          }
        }
        .is-active {
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>

